<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
            border: 1px solid black;
            width: 80px;
            display: inline-block;
            text-align: center;
            line-height: 1.5em;
        }

        .choose{
            background-color: red;
            color: white;
        }
    </style>
    <script>
        let timer = null;
        function startgame(){
            const arr = document.getElementsByTagName("li")
            console.log(arr)
            let i = 0
            timer = setInterval(function (){
                //全部重置样式
                for (const item of arr){
                    item.className = ""
                }

                arr[i].className = "choose"
                i++
                if(i == arr.length){
                    i = 0;
                }
            },100)
        }

        function stopgame(){
            setTimeout(function (){
                clearInterval(timer)
            },3000)
        }
    </script>
</head>
<body>
    <ul>
        <li>jack</li>
        <li>tom</li>
        <li>mike</li>
        <li>rose</li>
        <li>peter</li>
    </ul>
    <button onclick="startgame()">开始抽奖</button>
    <button onclick="stopgame()">停止</button>
</body>
</html>